Ana içeriğe geç

Preact Nedir?

Preact, React'in 3KB boyutunda alternatifi olarak sunulan modern, performans odaklı bir JavaScript kütüphanesidir. React API'sini korurken daha küçük ve hızlı bir seçenek sunar.

// Temel Preact Uygulaması
import { h, render } from 'preact';

const App = () => (
  <div class="app">
    <h1>Merhaba Preact!</h1>
    <p>Hafif ve hızlı bir UI kütüphanesi</p>
  </div>
);

render(<App />, document.body);

// React Uyumluluğu ile Kullanım
import { h, Component } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Sayaç: {count}</p>
      <button onClick={() => setCount(count + 1)}>Artır</button>
    </div>
  );
}
ipucu

Preact'i projenize eklemek için npm install preact komutunu kullanabilirsiniz.

Temel Özellikler​

  • 3KB boyutunda minimal yapı
  • React API uyumluluğu
  • Modern hooks desteği
  • Virtual DOM optimizasyonları
  • JSX desteği
  • Yüksek performans

Önemli Nokta: Preact, React'in temel özelliklerini korurken çok daha küçük bir boyut sunar. — Preact Dokümantasyonu

Preact'in Avantajları​

  1. Küçük Boyut

    • Minimal bundle size
    • Hızlı yükleme süreleri
    • Düşük bellek kullanımı

  2. React Uyumluluğu

    • React hooks desteği
    • Benzer API yapısı
    • Kolay geçiş imkanı
bilgi

preact/compat modülü sayesinde çoğu React uygulaması doğrudan Preact ile çalışabilir.

Kullanım Örnekleri​

  1. Basit Uygulama
import { h, render } from 'preact';

function App() {
  return (
    <div>
      <h1>Preact Uygulaması</h1>
      <nav>
        <a href="/">Ana Sayfa</a>
        <a href="/about">Hakkında</a>
      </nav>
    </div>
  );
}

render(<App />, document.body);
  1. Hooks Kullanımı
import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

function DataFetcher() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);
  
  return <div>{data ? JSON.stringify(data) : 'Yükleniyor...'}</div>;
}
tehlike

Preact, React'in bazı ileri düzey özelliklerini içermeyebilir. Kullanmadan önce ihtiyaçlarınızı değerlendirin.

Preact CLI​

# Yeni proje oluşturma
npx create-preact-app my-project

# Geliştirme sunucusunu başlatma
npm run dev

# Üretim için derleme
npm run build

Preact vs React Karşılaştırması​

  1. Avantajlar

    • Daha küçük boyut
    • Daha hızlı başlangıç süresi
    • Daha az bellek kullanımı
    • Daha basit kaynak kodu

  2. Dezavantajlar

    • Daha küçük ekosistem
    • Bazı React özellikleri eksik
    • Daha az üçüncü parti kütüphane
bilgi

Preact, özellikle performans ve boyut kritik olan projeler için ideal bir seçenektir.

En İyi Uygulamalar​

  1. Performans Optimizasyonu

    • shouldComponentUpdate kullanımı
    • Memo ve useMemo stratejileri
    • Code splitting

  2. React Uyumluluğu

    • preact/compat kullanımı
    • Aliasing yapılandırması
    • Package.json ayarları

  3. Build Optimizasyonu

    • Tree shaking
    • Bundle analizi
    • Lazy loading

Özetle, Preact, modern web uygulamaları için hafif, hızlı ve React-uyumlu bir alternatif sunar. Özellikle performans ve boyut optimizasyonunun önemli olduğu projelerde tercih edilebilecek güçlü bir çözümdür. React deneyimi olan geliştiriciler için kolay bir geçiş sağlar ve minimal öğrenme eğrisi ile hızlı geliştirme imkanı sunar.